<template>
  <div>
    <el-dialog
      title="修改供应商信息"
      :visible.sync="dialogFormVisible">
      <el-form v-model="selectedSupplier" style="text-align: left" ref="dataForm">
        <el-form-item label="供应商名" label-width="120px" prop="username">
          <el-input v-model="selectedSupplier.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商描述" label-width="120px" prop="name">
          <el-input v-model="selectedSupplier.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" label-width="120px" prop="name">
          <el-input v-model="selectedSupplier.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <supplier-add @onSubmit="listSuppliers()"></supplier-add>
    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="Suppliers"
        stripe
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="id"
          label="id"
          width="100">
        </el-table-column>
        <el-table-column
          prop="name"
          label="供应商名"
          fit>
        </el-table-column>
        <el-table-column
          prop="content"
          label="供应商描述"
          fit>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          fit>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="editSupplier(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteSupplier(scope.row)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
  </div>
</template>

<script>
import SupplierAdd from "../supplier/SupplierAdd.vue";

export default {
  name: "Supplier",
  components: {SupplierAdd},
  data () {
    return {
      dialogFormVisible: false,
      Suppliers: [],
      selectedSupplier:[],
    }
  },
  mounted () {
    this.listSuppliers()
  },
  computed: {
    tableHeight () {
      return window.innerHeight - 320
    }
  },
  methods: {
    listSuppliers () {
      var _this = this
      this.$axios.get('/supplier').then(resp => {
        if (resp && resp.status === 200) {
          _this.Suppliers = resp.data
          console.log(_this.Suppliers)
        }
      })
    },
    editSupplier (Supplier) {
      this.dialogFormVisible = true
      this.selectedSupplier = Supplier
    },
    onSubmit () {
      console.log(this.selectedSupplier)
      var Supplier = this.selectedSupplier
      this.$axios.post('/Supplier', {
        id: Supplier.id,
        name: Supplier.name,
        content: Supplier.content,
        phone: Supplier.phone,
      }).then(resp => {
        if (resp && resp.status === 200) {
          this.$alert('修改成功', '提示',)
          this.dialogFormVisible = false
          this.listSuppliers()
        }
      })
    },
    deleteSupplier(item){
      this.$confirm('是否删除此供应商？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        var Supplierid = item.id;
        var url = '/supplier/delete/' + Supplierid
        this.$axios.delete(url).then(resp => {
          this.listSuppliers()
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },
  }
}

</script>

<style scoped>

</style>
